<template>
    <div class="flex_row_center">
        <div :style="{ backgroundColor: color() }" class="div_p" ref="point"></div>
        <label class="ml5 lb2">{{ props.text }}</label>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Props {
    state: boolean,
    text: string,
}

const point = ref<HTMLDivElement | null>(null);
const props = defineProps<Props>();

function color() {
    if (props.state) {
        return 'red';
    } else {
        return '#ccc';
    }
}


</script>

<style scoped>

.div_p {
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.lb2 {
    font-size: small;
}

</style>

